<template>
  <div v-loading="loading"  element-loading-text="加载中。。。">
    <el-card style="overflow:visible;">
      <el-form :model="form"  size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
            <el-col  :lg="4" :md="6">
                <el-form-item label="应用编号"  prop="appId">
                  <el-select v-model="form.appId" filterable placeholder="请选择应用编号" >
                    <el-option
                    v-for="item in appList"
                    :key="item.AppNum"
                     :label="item.AppNum + '-' +item.AppName"
                    :value="item.AppNum">
                    </el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col  :lg="4" :md="6">
              <el-form-item label="角色编号"  prop="roleID" >
                <el-input v-model="form.roleID" placeholder="请输入角色编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col   :lg="4" :md="6">
              <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg='2' :md='3' class="searchBtnMarginTop">
                <el-button type="primary" icon='el-icon-search'
                  @click="checkUserList"
                  :loading="loading" size='mini'>查询</el-button>
            </el-col>
            <el-col  :lg="2" :md="3" class="searchBtnMarginTop">
              <el-button type='warning' size='mini' icon='el-icon-refresh'
              @click="resetForm('form')">重置</el-button>
            </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
      <el-row :gutter="10">
        <el-col  :lg="2" :md="3" v-if="btnPermission('Button_User_Add')">
          <el-button type="primary" size="mini"  @click="createRole" icon='el-icon-plus'
          >新增</el-button>
        </el-col>
        <el-col  :lg="2" :md="3"  v-if="btnPermission('Button_User_Edit')">
          <el-button type="primary"
            size="mini" icon='el-icon-edit' @click="updateRole" :disabled="currentRow.length!=1"
            >修改</el-button>
        </el-col>
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Delete')">
          <el-button type="danger"
            size="mini" icon='el-icon-delete' @click="delUser"  :disabled="currentRow.length!=1"
          >删除</el-button>
        </el-col>
          <el-col  :lg="2" :md="3" >
            <el-dropdown trigger="click"  @command="handleCommand" >
              <el-button type="primary" size="mini" :disabled="currentRow.length!=1">
                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="detail" v-if="btnPermission('Button_User_Branch')" >详细查询</el-dropdown-item>
                <el-dropdown-item command="tradeBind" v-if="btnPermission('Button_User_Branch')">角色交易绑定</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
      </el-row>
      <el-table :data="tableData" ref="table" border class="tableMarginTop"
        highlight-current-row
        @selection-change="handleCurrentChange"
        header-row-class-name="tableHeaderClass"
        style="min-height:390px;">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column prop="appnum" label="应用编号"></el-table-column>
        <el-table-column prop="rolenum" label="角色编号"></el-table-column>
        <el-table-column prop="rolename"  label="角色名称"></el-table-column>
        <el-table-column prop="rolestatus" :formatter="dataFormat" label="角色状态"></el-table-column>
      </el-table>
      <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
        <el-pagination  :current-page="currentPage" background
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalRcrdNum"
          @current-change="changePage">
        </el-pagination>
      </div>
    </el-card>
    <!-- 弹窗 -->
    <keep-alive>
      <component :is="dialogList.createRoleDialog" :option="dialogOptions" @refreshTable="refreshTable"></component>
    </keep-alive>
    <!-- 用户应用分配 -->
     <keep-alive>
      <component :is="dialogList.appOpenDialog" :option="dialogOptionsSystem"   @systemEmit="checkUserList"></component>
    </keep-alive>
     <keep-alive>
      <component :is="dialogList.tradeBindDialog" :option="dialogOptionsTradeBind"   @systemEmit="checkUserList"></component>
    </keep-alive>
    <keep-alive>
      <component :is="dialogList.updateUser" :optionUpdate="dialogOptionsupdateUser"  @refreshTable="checkUserList"></component>
    </keep-alive>
      <!--  <keep-alive>
      <component :is="dialogList.delRoleUser" :optionDelRole="dialogOptionsdelRoleUser"  @refreshTable="checkUserList"></component>
    </keep-alive>   -->
  </div>
</template>

<script>
import request from "@/common/utils/request";
import selectTree from "@/components/selectTree2/";
import getGlobalParams from "@/common/utils/getGlobalParams";
import createRoleDialog from "./dialog/createRole";//这两个页面在用
import tradeBindDialog from "./dialog/tradeBind";//这两个页面在用
import updateUser from "./dialog/updateUser";
import appOpenDialog from "./dialog/appOpen";
import roledel from "@/message/userManage/role/role-del";
import userDel from "@/message/userManage/user/user-del";
import appQuery from "@/message/shared/appquery";
import branchList from "@/message/shared/branch-list";
import userUnlock from "@/message/userManage/user/user-unlock";
import RoleInfoQuery from "@/message/userManage/role/role-info-query";
import resetPassword from "@/message/userManage/user/reset-password";
export default {
  name: "user-info-manage",
  components: { selectTree },
  data() {
    return {
      postStatus:[],
       appList:[],
      pageSize: undefined,//表格每页的条数
      brnoName: {},
      form1: {},
      form: {//表单数据
        appId: "",
        roleID: "",
        roleName: ""
      },
      currentRow: [],//表格当前选中行
      currentPage: 1,//表格当前页
      totalRcrdNum: 0,
      tableData: [],//表格 数据
      dialogList: {//指定被渲染组件列表
        createRoleDialog,
        tradeBindDialog,
        appOpenDialog,
        updateUser
      },
      dialogOptions: {//创建角色
        isShow: false
      },
      dialogOptionsSystem: {//角色交易绑定
        isShow: false,
        currentRow: []
      },
      dialogOptionsTradeBind: {//
        isShow: false,
        currentRow: [],
        appList:[]
      },
      dialogOptionsdelRoleUser: {
         isShow: false,
        currentRow: []
      },
      dialogOptionsupdateUser: { isShow: false, currentRow: [] },//
      loading: false,//loading遮罩
      total: 0,//表格总条数
      startDialogVisible: false,
      checkedUser: false,//控制按钮是否可用
      isDisabledDel: false
    };
  },
  computed: {
    tableDataPage() {//实现前端分页
      return this.tableData;
    }
  },
   created: function() {
    this.postStatus = getGlobalParams.get("postStatus");
    this.pageSize = getGlobalParams.get("PageSize");
    this.checkUserList();
    this.initDate();
  },
  methods: {
     initDate() {
      //应用查询
      this.loading=true;
      let resBody = new appQuery();
      resBody.data.UserNum = this.$store.getters.UserNum;
      request(resBody)
        .then(response => {
          if (response.APP_HEAD.ReturnCode === "000000") {
            this.loading = false;
            this.appList = response.RspInfo.Result;
          } else {
            this.loading = false;
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
          }
        })
        .catch(error => {
          this.loading = false;
          //   this.logger.log("fail", error);
        });
    },
    changePage(val) {
      this.currentPage = val;
      this.checkUserList(val,true);
    },
     refreshTable() {
      //刷新数据并清除选中的数据
       this.checkUserList();
    },
    updateRole(){
      this.dialogOptionsupdateUser.isShow = true;
      this.dialogOptionsupdateUser.currentRow = this.currentRow;
    },
    delRole(){
       this.dialogOptionsdelRoleUser.isShow = true;
      this.dialogOptionsdelRoleUser.currentRow = this.currentRow;
    },
    delUser() {//删除弹出
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.userDel();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    dataFormat(row, column) {//格式化表格
      //枚举设备形式
    if(column.property == 'rolestatus')
      return this.postStatus[row[column.property]];
    },
    resetForm(formName) {//重置查询表单
      this.$refs["" + formName].resetFields();
    },
    handleCommand(val) {//更多操作按钮的切换
      if (val == "detail") {
        this.openDetail();
      } else if (val == "tradeBind") {
        this.openTradeBind();
      }
    },
    createRole() {
        //添加
      this.dialogOptions.isShow = true;
    },
    openDetail() {
      this.dialogOptionsSystem.isShow = true;
      this.dialogOptionsSystem.currentRow = this.currentRow;
    },
    openTradeBind() {//角色交易绑定
      this.dialogOptionsTradeBind.isShow = true;
      this.dialogOptionsTradeBind.currentRow = this.currentRow;
      this.dialogOptionsTradeBind.appList = this.appList;
    },
    userDel() {      //删除用户
       this.loading = true;
      let resBody = new roledel();
        resBody.data.AppNum = this.currentRow[0].appnum;;
        resBody.data.RoleNum = this.currentRow[0].rolenum;
        resBody.data.RoleName = this.currentRow[0].rolename;
      request(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.loading = false;
            this.$message({
              type: "success",
              message: "用户删除成功!"
            });
            this.checkUserList();
          } else {
            this.loading = false;
            this.$message({
              type: "success",
              message: "用户删除失败!"
            });
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },

    checkUserList(val=1,isPage) {//查询用户表格
      if(!isPage){
        this.currentPage = 1
        // this.form1 = Object.assign({}, this.form)
      }
      this.checkedUser = false;
      this.isDisabledDel = false;
      this.loading = true;
      let resBody = new RoleInfoQuery();
      if(this.form.appId ===""){
        resBody.data.UserNum = this.$store.getters.UserNum
      }else{
        resBody.data.AppNum =this.form.appId
      }
      resBody.data.RoleNum = this.form.roleID;
      resBody.data.RoleName = this.form.roleName;
      resBody.data.start = (this.currentPage - 1) * this.pageSize;
      resBody.data.length = this.pageSize;
      resBody.data.CurtPage = this.currentPage;

      request(resBody)
        .then(response => {
           this.totalRcrdNum = response.RspInfo.recordsTotal
          ? response.RspInfo.recordsTotal
          : 0;
          if (response.APP_HEAD.ReturnCode === "000000") {
            console.log(response)
            this.loading = false;
            this.tableData = response.RspInfo.pageList;
          }else {
            this.tableData=[];
          this.loading = false;
          this.$message({
            type: "success",
            message: `${response.SYS_HEAD.ReturnMessage}!`
          });
        }
        })
        .catch(error => {
          this.loading = false;
          // this.logger.log("fail", error);
        });
    },
      handleCurrentChange(val) {//表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
      this.currentRow = val;
      /* if (val.length == 1) {
        this.checkedUser = true;
        this.isDisabledDel = true;
      } else if (val.length > 1) {
        this.checkedUser = false;
        this.isDisabledDel = true;
      } else {
        this.checkedUser = false;
        this.isDisabledDel = false;
      } */
    },
  }
};
</script>


<style lang="scss" scoped>
.selectTree {
  min-width: 150px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-card {
  width: 100%;
}
.el-form-item {
  margin-left: 30px;
}
.el-form-item1 {
  margin-left: 10px;
}
.box2-button {
  width: 80px;
}

.el-card {
  overflow: inherit;
}
</style>
